<template>
  <el-container>
    <el-aside>
      <ul class="aside">
        <template v-for="(item,index) in menuList">
          <li :class="current === index?'active':''" @click="current = index">
            <component :is="item.icon" class="icons"/>
            {{ item.title }}
          </li>
        </template>
      </ul>
    </el-aside>

    <el-main>
      <template v-if="current === 0">
        <declaration-notice></declaration-notice>
      </template>
      <template v-else-if="current === 1">
        <policy-indicators></policy-indicators>
      </template>
    </el-main>
  </el-container>
</template>


<script setup>
import {ref} from "vue";
import DeclarationNotice from "@/views/policyIntelligenceMatching/components/declarationNotice.vue";
import PolicyIndicators from "@/views/policyIntelligenceMatching/components/policyIndicators.vue";

const current = ref(0)
const menuList = [{
  title: '申报通知配置',
  icon: 'SetUp'
},
  {
    title: '政策指标管理',
    icon: 'Guide'
  }
]


</script>

<style scoped lang="scss">
.aside {
  width: calc(100% - 10px);
  height: calc(100vh - 50px);
  background-color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

  .icons {
    width: 20px;
    height: 20px;
    color: #246afa;
    margin-right: 10px;
  }
  > li {
    padding: 20px;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.35s;
    display: flex;
    align-items: center;
  }

  > li:hover,
  .active {
    background-color: #e6f3ff;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 2px;
      height: 40px;
      background-color: #0b63b7;
    }
  }
}

</style>
